彻底搞懂var、let、const的区别

您所在的位置：网站首页 › have make let 区别 › 彻底搞懂var、let、const的区别

彻底搞懂var、let、const的区别

2024-03-27 23:48| 来源: 网络整理| 查看: 265

var、let、const都是js声明变量的方法，var是es5语法，存在变量提升，let和const是es6语法新提出的块级作用域概念，存在暂时性死区，没有变量提升机制。

一、var变量提升机制

我们在全局作用域中或局部作用域中，使用var关键字声明的变量，都会被提升到该作用域的最顶部，这就是我们常说的变量提升

1、var在全局作用域的应用

代码块1:

console.log(a); //undefind var a = 1； console.log(a); //1

等价于

代码块2:

var a; console.log(a); //undefined a = 1; console.log(a); //1

代码块2为计算机在执行代码块1程序的执行流程

代码块3:

var a = 1; console.log(window.a); //1

var在全局作用域声明的变量会挂载在window对象上，它会创建一个新的全局变量作为全局对象的属性，这种行为说不定会覆盖到window对象上的某个属性

2、var在局部作用域的应用

未在局部加var声明的情况

代码块1：

console.log(a); //严格模式下：Uncaught ReferenceError: a is not defined，非严格模式下：undefined console.log(window.a); //严格模式下：打印 window.a 也是 undefined function person(){ a = 1 console.log(a); //1 } person();

等价于

代码块2:

var a; console.log(a); //undefined function person(){ a = 1 console.log(a); //1 } person();

代码块2为计算机在执行代码块1程序的执行流程

在局部加var声明的情况

代码块1:

person(); console.log(a); //报错 Uncaught ReferenceError: a is not defined function person(){ var a = 1; console.log(a); //1 }

等价于

代码块2:

person(); console.log(a); //报错 Uncaught ReferenceError: a is not defined function person(){ var a; a = 1; console.log(a); //1 }

代码块2为计算机在执行代码块1程序的执行流程

二、块级作用域let、const

let、const声明和var声明用法一样，不同点在于let、var声明的是变量，const声明的是常量。var存在变量提升，let、const不存在变量提升。var在全局作用域声明的变量会挂载在window对象上，它会创建一个新的全局变量作为全局对象的属性，这种行为说不定会覆盖到window对象上的某个属性，而let const声明的变量则不会有这一行为

1、let声明

let声明的是变量，没有var那样的变量提升，let声明的变量只在当前作用域中有效

代码块1:

console.log(a);//暂时性死区，报错 Unexpected identifier 'Uncaught' let a = 1; console.log(a)；

代码块2:

{ console.log(a); //暂时性死区，报错 Unexpected identifier 'Uncaught' let a = 1; console.log(a); }

代码块3:

{ let a = 1; console.log(a); //1; } console.log(a); 访问不了内部变量，报错 Unexpected identifier 'Uncaught'

代码块4:

var a = 1; let a = 1; //不能重复声明报错 Identifier 'a' has already been declared

代码块5:

var a = 1; //全局作用域 { let a = 1; // 代码块中声明，毫无影响 }

代码块6:

let a = 1; console.log(window.a); //undefined

上述代码说明：let声明的变量没有变量提升，存在暂时性死区。如果在同一个作用域中某个变量已经存在，再次使用let关键字声明的话会报错。let声明的变量不会挂载到window对象上

2、const 声明

const声明的是常量，常量不可以修改。常量定义必须初始化值，如果不初始化值就会报错。特别注意的一点是const变量不能修改指针，但是可以修改值，比如我们定义一个对象，我们就可以修改对象里的属性值，但是不可以重写整个对象。使用const声明的常量没有var那样的变量提升，const声明的常量只在当前作用域中有效

代码块1:

{ console.log(a); //暂时性死区，报错 Unexpected identifier 'Uncaught' const a = 1; console.log(a); }

代码块2:

{ const a = 1; console.log(a); //1; } console.log(a); 访问不了内部变量，报错 Unexpected identifier 'Uncaught'

代码块3:

const a; console.log(a);//常量a未初始化报错 Missing initializer in const declaration

代码块4:

const a = { b:1,c:2 }; a = {}; //不能修改对象指针, 报错 Assignment to constant variable

代码块5:

const a = { b:1,c:2 }; a = {b:2,c:1}; console.log(a); // Assignment to constant variable.

代码块6:

const a = 1; console.log(window.a); //undefined

上述代码说明：const声明的变量不存在变量提升，存在暂时性死区，必须先声明并立即赋值，常量值不可以修改，对象可以修改值，不能修改指针。const声明的变量不会挂载到window对象上

【本文地址】

公司简介

联系我们